<template>
  <div class="control" :style="styleSet">
    <w-table
      :data="rows"
      :columns="columns"
      :is-paging="true"
      :paging="paging"
      row-key="Id"
      @load="loadGrid"
    >
      <template slot="action" slot-scope="e">
        <el-button
          icon="el-icon-view"
          size="mini"
          type="primary"
          circle
          @click="show(e.row)"
        />
      </template>
    </w-table>
  </div>
</template>

<script>
import moment from 'moment'
import { DataTable } from '@/customForm/api/pageCalculate'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    height: {
      type: Number,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    extend: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px',
        height: '70px'
      },
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      },
      rows: [],
      colList: [],
      columns: [],
      formId: null,
      isInit: false,
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      }
    }
  },
  computed: {},
  watch: {
    width: {
      handler(val) {
        if (val && this.height && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    height: {
      handler(val) {
        if (val && this.width && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.height && this.width) {
          this.init()
        }
      },
      immediate: true
    },
    item: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    show(row) {
      this.$router.push({ name: 'appPageView', params: { id: row.Id, formId: this.formId }})
    },
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px',
        maxHeight: (14 * this.height) + 'px'
      }
    },
    initChildren(list) {
      if (list == null || list.length === 0) {
        return null
      }
      return list.map(c => {
        const col = {
          title: c.Label
        }
        if (c.Children == null || c.Children.length === 0) {
          col.sortable = 'custom'
          col.align = this.colAlign[c.align]
          col.key = c.Name
          col.sortby = c.SortName == null ? c.Name : c.SortName
          if (c.Width) {
            col.minWidth = c.Width + 'px'
          }
          this.colList.push({
            Id: c.Id,
            Name: c.Name,
            DataType: c.DataType,
            ColSet: c.ColSet
          })
        } else {
          col.children = this.initChildren(c.Children)
        }
        return col
      })
    },
    initQuery() {
      this.$watch(
        () => {
          return this.query[this.id].ver
        },
        (newVal, oldVal) => {
          if (newVal !== oldVal) {
            this.paging.Index = 1
            this.loadGrid()
          }
        },
        { immediate: false }
      )
    },
    reset() {
      this.paging.Index = 1
      this.formId = this.item.FormId
      if (this.item.Column) {
        const cols = this.initChildren(this.item.Column)
        if (this.item.IsAction) {
          cols.push({
            key: 'Action',
            title: '操作',
            align: 'left',
            width: 80,
            slotName: 'action'
          })
        }
        this.columns = cols
        this.isInit = true
      } else {
        this.isInit = false
        this.columns = []
      }
      if (this.item.Paging != null) {
        this.paging.Size = this.item.Paging.PageSize
        this.paging.SortName = this.item.Paging.SortName
        this.paging.IsDesc = this.item.Paging.IsDesc
      }
      if (this.item.IsConfig) {
        this.initQuery()
        this.loadGrid()
      }
    },
    formatRow(row) {
      this.colList.forEach(c => {
        const val = row[c.Name]
        if (val == null) {
          return
        }
        if (c.DataType === 5) {
          if (val === true) {
            if (c.ColSet == null) {
              row[c.Name] = '是'
            } else {
              row[c.Name] = c.ColSet.ActiveText ? c.ColSet.ActiveText : '是'
            }
          } else {
            if (c.ColSet == null) {
              row[c.Name] = '否'
            } else {
              row[c.Name] = c.ColSet.InactiveText ? c.ColSet.InactiveText : '否'
            }
          }
        } else if (c.DataType === 3 || c.DataType === 6 || c.DataType === 9) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format === 'time') {
            row[c.Name] = parseInt(val / 60) + ':' + (val % 60)
          } else if (format === 'ratio') {
            row[c.Name] = val + '%'
          }
        } else if (c.DataType === 7) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD HH:mm')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        } else if (c.DataType === 8) {
          const format = c.ColSet ? c.ColSet['format'] : null
          if (format == null) {
            row[c.Name] = moment(val).format('YYYY-MM-DD')
          } else {
            row[c.Name] = moment(val).format(format)
          }
        }
      })
    },
    async loadGrid() {
      const res = await DataTable({
        Id: this.id,
        Search: this.query[this.id]?.param.filter(c => c.Val != null || c.Vals != null),
        Extend: this.extend
      }, this.paging)
      if (res == null) {
        this.paging.Total = 0
        this.rows = []
      } else {
        this.paging.Total = res.Count
        res.Rows.forEach(c => {
          this.formatRow(c)
        })
        this.rows = res.Rows
      }
    }
  }
}
</script>
<style scoped>
.control .min {
  font-size: 3.2rem;
}

.control .md {
  font-size: 4.2rem;
}

.control .census {
  width: 100%;
  text-align: center;
  padding: 8px;
}

.control .max {
  font-size: 5.2rem;
}

.control .title .icon {
  float: right;
}

.control .title {
  line-height: 25px;
  font-weight: 400;
  padding: 5px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  /* border-left: 3px solid #409eff; */
}
</style>
